<template>
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <customNavbar />
    <scroll-view
      enable-back-to-top
      :scroll-y="true"
      class="scroll_box"
      refresher-enabled
      :refresher-triggered="trigger"
      @scrolltolower="scrolltolower"
      @refresherrefresh="onRefresherrefresh"
    >
      <skeleton v-if="showSkeleton" />
      <template v-else>
        <!-- 轮播图 -->
        <tphSwiper :homeBannerList="homeBannerList" height="300rpx"/>
        <!-- 分类面板 -->
        <categoryPanel :homeCategoryList="homeCategoryList"></categoryPanel>
        <!-- 热门推荐面板 -->
        <hotPanel :hotPanelList="hotPanelList" />
        <!-- 猜你喜欢 -->
        <tphGuess ref="tphGuessRef" />
      </template>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
// 引入子组件
import customNavbar from './components/customNavbar.vue'
import categoryPanel from './components/categoryPanel.vue'
import hotPanel from './components/hotPanel.vue'
// 引入onLoad函数
import { onLoad } from '@dcloudio/uni-app'
// 引入API
import { getHomeBannerAPI, getHotPanelAPI, getHomeCategoryAPI } from '@/api/home'
import type { bannerInfoType, hotPanelType, homeCategoryType } from '@/types/home'
import type { tphGuessType } from '@/global'
// 引入骨架屏
import skeleton from './components/skeleton.vue'
// 是否显示骨架屏
const showSkeleton = ref<boolean>(true)
// 首页轮播图列表
const homeBannerList = ref<bannerInfoType[]>([])
// 获取首页轮播图的函数
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  if (res.code === '1') {
    // 接口请求成功
    homeBannerList.value = res.result
  }
}
// 下拉刷新效果
const trigger = ref<boolean>(false)
// 猜你喜欢ref对象
const tphGuessRef = ref<tphGuessType>()
// 滚动区域滚动到底部时触发的回调
const scrolltolower = () => {
  nextTick(() => {
    tphGuessRef.value?.scrolltolower()
  })
}
// 热门推荐面板列表
const hotPanelList = ref<hotPanelType[]>([] as hotPanelType[])
// 获取热门推荐面板数据的函数
const getHotPanelData = async () => {
  const res = await getHotPanelAPI()
  if (res.code === '1') {
    // 接口请求成功
    hotPanelList.value = res.result
  }
}
// 分类面板列表
const homeCategoryList = ref<homeCategoryType[]>([])
// 获取分类面板数据的函数
const getHomeCategoryData = async () => {
  const res = await getHomeCategoryAPI()
  if (res.code === '1') {
    homeCategoryList.value = res.result
  }
}
// 页面加载时调用
onLoad(async () => {
  showSkeleton.value = true
  await Promise.all([
    getHomeBannerData(),
    getHotPanelData(),
    getHomeCategoryData(),
    tphGuessRef.value?.getGuessData(),
  ])
  showSkeleton.value = false
})
// 下拉刷新的回调
const onRefresherrefresh = async () => {
  trigger.value = true
  // 重新切回骨架屏
  showSkeleton.value = true
  // 重置猜你喜欢模块的数据
  tphGuessRef.value?.resetData()
  // 重新获取所有数据
  await Promise.all([
    getHomeBannerData(),
    getHotPanelData(),
    getHomeCategoryData(),
    tphGuessRef.value?.getGuessData(),
  ])
  // 关闭骨架屏
  showSkeleton.value = false
  // 关闭下拉刷新
  trigger.value = false
}
</script>

<style lang="scss">
.viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #f7f7f7;
  .scroll_box {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
